<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper中文教程</title>
  <!-- 🔔1.1 通过 link 标签引进 .min.css 文件 -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <!-- 3. 你可能想要给Swiper定义一个大小 -->
  <style>
    .swiper {
      width: 100%;
      height: 500px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <!-- 2. 添加HTML内容 -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/banner01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/banner02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/banner03.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <!-- 🔔1.2. 通过 script 标签引进 .min.js 文件 -->
  <script src="./swiper/swiper-bundle.min.js"></script>
  <!-- 4. 初始化Swiper -->
  <script>
    let mySwiper = new Swiper('.swiper', {
      // ✅ 基于 Loop模式 / 无限循环(200) 例子改造成华为轮播图
      // 例子链接：https://swiper.com.cn/demo/200-infinite-loop.html
      slidesPerView: 1,   // 展示一张图片
      loop: true,     // 无限循环
      pagination: {   // 指示器配置(小圆点)
        el: ".swiper-pagination",   // 小圆点类名
        clickable: true,            // 点击小圆点能切换
      },
      navigation: {   // 导航配置
        nextEl: ".swiper-button-next",   // 下一张类名(右箭头)
        prevEl: ".swiper-button-prev",   // 上一张类名(左箭头)
      },
    })        
  </script>
</body>

</html>